import React from 'react';
import { Player } from '../types/game';

interface PieceProps {
  player: Player;
  size?: 'small' | 'medium' | 'large';
  isWinning?: boolean;
  className?: string;
}

export const Piece: React.FC<PieceProps> = ({ 
  player, 
  size = 'medium', 
  isWinning = false,
  className = '' 
}) => {
  if (!player) return null;

  const sizeClasses = {
    small: 'w-4 h-4',
    medium: 'w-5 h-5',
    large: 'w-6 h-6',
  };

  const pieceClasses = player === 'black' 
    ? 'bg-piece-black shadow-piece-black'
    : 'bg-piece-white shadow-piece-white border border-piece-whiteShadow';

  const winningClasses = isWinning 
    ? 'ring-2 ring-semantic-success ring-offset-2 scale-110' 
    : '';

  return (
    <div 
      className={`
        ${sizeClasses[size]} 
        ${pieceClasses} 
        ${winningClasses}
        ${className}
        rounded-full
        transition-all duration-normal
        animate-piece-drop
      `}
    />
  );
};

interface HoverPieceProps {
  player: Player;
  className?: string;
}

export const HoverPiece: React.FC<HoverPieceProps> = ({ player, className = '' }) => {
  if (!player) return null;

  const pieceClasses = player === 'black' 
    ? 'bg-piece-black opacity-30' 
    : 'bg-piece-white opacity-30 border border-neutral-300';

  return (
    <div 
      className={`
        w-5 h-5
        ${pieceClasses} 
        ${className}
        rounded-full
      `}
    />
  );
};